<!--
  功能：源数据编辑模式
  时间：2024年10月12日 17:47:23
-->
<template>
  <el-button @click="openDataStructure()">源数据模式</el-button>
  <el-dialog
    v-model="dataStructure.show"
    title="源数据编辑模式（当前模式请谨慎操作，易导致系统无法运行）"
    width="88%"
    top="5vh"
    destroy-on-close
  >
    <div class="flex c50">
      <div>
        <div class="b1">修改数据</div>
        <el-input v-model="dataStructure.data" rows="9" type="textarea" />
        <div class="b5">
          <el-button type="primary" @click="() => saveFn()">保存修改</el-button>
        </div>
      </div>
      <div>
        <div class="b1">数据格式化预览</div>
        <el-scrollbar height="70vh">
          <pre>{{ dataStructureStr }}</pre>
        </el-scrollbar>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
interface IProps {
  item: any;
}
const props = defineProps<IProps>();

const emit = defineEmits<{
  (e: "save", data: any): void;
}>();

//查看数据结构
const dataStructure = reactive<{ show: boolean; data: any }>({
  show: false,
  data: null,
});
const dataStructureStr = computed(() => {
  return JSON.stringify(JSON.parse(dataStructure.data), null, "\t");
});
function openDataStructure() {
  dataStructure.show = true;
  dataStructure.data = JSON.stringify(props.item);
}

function saveFn() {
  emit("save", JSON.parse(dataStructure.data));
  dataStructure.show = false;
}
</script>

<style scoped lang="scss">
.c50 {
  justify-content: space-between;
  align-items: flex-start;
  & > div {
    width: calc(65% - 5px);
    &:last-child {
      width: calc(35% - 5px);
    }
  }
  .b1 {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
  }
  .b5 {
    margin-top: 5px;
  }
}
</style>
